<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


绝对定位
属性：position
值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了
所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档
<style>
    p.abs{
        position: absolute;
        left: 150px;
        top: 50px;
    }
</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>
双击选中所有代码



是绝对定位基于最近的一个定位了的父容器
<style>
    p.abs{
        position: absolute;
        left: 100px;
        top: 50px;
    }
    .absdiv{
        position: absolute;
        left: 150px;
        top: 50px;
        width:215px;
        border: 1px solid blue;
    }
</style>

<div>
    <p >正常文字a</p>
    <p >正常文字b</p>
    <p >正常文字c</p>
    <p >正常文字d</p>
    <p >正常文字e</p>
    <p >正常文字f</p>
    <p >正常文字g</p>
</div>

<div class="absdiv">
    这是一个定位了的div
    <p class="abs" >绝对定位的文字</p>
</div>


如果没有定位了的父容器
"绝对定位的文字" 这个p 的父容器div，并没有定位。
所以它的”最近的一个定位了的父容器” 即body
<style>
    p.abs{
        position: absolute;
        left: 100px;
        top: 50px;
    }

</style>

<div>
    <p >正常文字a</p>
    <p >正常文字b</p>
    <p >正常文字c</p>
    <p >正常文字d</p>
    <p >正常文字e</p>
    <p >正常文字f</p>
    <p >正常文字g</p>
</div>

<div>
    这个div没有定位
    <p class="abs" >绝对定位的文字</p>
</div>


通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。
重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

<style>
    img#i1{
        position: absolute;
        left: 60px;
        top: 20px;
        z-index:1;
    }

    img#i2{
        position: absolute;
        left: 60px;
        top: 120px;
        z-index:-1;
    }

</style>

<div>
    <p >正常文字a</p>
    <p >正常文字b</p>
    <p >正常文字c</p>
    <p >正常文字d</p>
    <p >正常文字e</p>
    <p >正常文字f</p>
    <p >正常文字g</p>
</div>

<img id="i1" src="https://how2j.cn/example.gif" />
<img id="i2" src="https://how2j.cn/example.gif" />





相对定位
属性：position
值： relative
与绝对定位不同的是，
相对定位不会把该元素从原文档删除掉，
而是在原文档的位置的基础上，移动一定的距离

<style>
    p.r{
        position: relative;
        left: 150px;
        top: 50px;
    }
</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="r" >相对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>



浮动

浮动的框可以向左或向右移动，
直到它的外边缘碰到包含框或另一个浮动框的边框为止。、

文字向右浮动
浮动后，原来的“坑”就让出来了
并且是在原来的高度的基础上，向右浮动
<style>
    .f{
        float:right;
    }
</style>

<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>




文字向左浮动
首先，向左浮动后，会把“坑”让出来，
这个时候"正常的文字4“ 就会过来试图占这个坑，
但是，发现 “浮动的文字”并没有走，结果，就只好排在它后面了
<style>
    .f{
        float:left;
    }
</style>

<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>


文字围绕图片
当图片不浮动时，文字就会换行出现在下面
当图片浮动时，文字围绕着图片
和步骤2一样，当图片浮动的时候，
就会让出这个“坑”出来，这个时候文字就试图去填补这个“坑”，
结果发现，图片没走，那就只好围绕图片摆放了
<style>
    .f{
        float:left;
    }

    div{
        width:320px;
    }
</style>

<div >
    <img src="https://how2j.cn/example.gif"/>

    <p>  当图片不浮动时，文字就会换行出现在下面
        当图片不浮动时，文字就会换行出现在下面
        当图片不浮动时，文字就会换行出现在下面
        当图片不浮动时，文字就会换行出现在下面
        当图片不浮动时，文字就会换行出现在下面
        当图片不浮动时，文字就会换行出现在下面
    </p>
</div>

<div >
    <img  class="f" src="https://how2j.cn/example.gif"/>

    <p>  当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
    </p>
</div>




文字不想围绕图片
不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果

<style>
    .f{
        float:left;
    }

    div{
        width:320px;
    }

    .clearp{
        clear:left;
    }

</style>

<div >
    <img  class="f" src="https://how2j.cn/example.gif"/>

    <p>  当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
        当图片浮动时，文字围绕着图片
    </p>
</div>

<div >
    <img  class="f" src="https://how2j.cn/example.gif"/>

    <p class="clearp">  当图片浮动时，文字却不想围绕图片
        当图片浮动时，文字却不想围绕图片
        当图片浮动时，文字却不想围绕图片
        当图片浮动时，文字却不想围绕图片

    </p>
</div>






水平排列div
默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
<style>
    div#floatingDiv{
        width:200px;
    }
    div#floatingDiv div{
        float:left;
    }
</style>
默认的div排列是会换行的

<div>
    菜单1
</div>
<div>
    菜单2
</div>
<div>
    菜单3
</div>











如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果

<div id="floatingDiv">
    <div>
        菜单1
    </div>
    <div>
        菜单2
    </div>
    <div>
        菜单3
    </div>
    <div>
        菜单4
    </div>
    <div>
        菜单5
    </div>
    <div>
        菜单6
    </div>
</div>


元素的display显示方式有多种，隐藏、块级、内联、内联-块级
隐藏 display:none; 使得被选择的元素隐藏，并且不占用原来的位置

<style>
    div.d{
        display:none;
    }

</style>

<div>可见的div1</div>
<div class="d">隐藏的div2,使用display:none隐藏</div>
<div>可见的div3</div>


块级
display:block; 表示块级元素
块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效

div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
<style>
    div,span{
        border: 1px solid lightgray;
        margin:10px;
        width:200px;
        height:100px;
    }

    .d{
        display:block;
    }
</style>

<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>


内联
display:inline; 表示内联元素
内联元素前后没有换行，并且在其上的width和height也无效。
其大小由其中的内容决定

div默认是块级元素
span默认是内联元素

<style>
    div,span{
        border: 1px solid lightgray;
        margin:10px;
        width:200px;
        height:100px;
    }

    .s{
        display:inline;
    }
</style>

<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>

<div class="s">这是div，被改造成了内联元素</div>


内联-块级
内联是不换行，但是不能指定大小
块级时能指定大小，但是会换行

有时候，需要元素处于同一行，同时还能指定大小，
这个时候，就需要用到内联-块级 inline-block

<style>
    span{
        display:inline-block;
        border: 1px solid lightgray;
        margin:10px;
        width:100px;
    }
</style>
像这样 ，每个都能设置宽度 ，同时还能在同一行。
<br>

<span>盖伦</span>
<span>蒙多医生</span>
<span>奈德丽</span>
<span>蒸汽机器人</span>


其他
其他的显示方式像
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
这些就不太常见了


内容居中
<style>
    div{
        border:1px solid lightgray;
        margin:10px;
    }
</style>
<div align="center">
    通过设置属性align="center" 居中的内容
</div>

<div  style="text-align:center">
    通过样式style="text-align:center" 居中的内容
</div>



元素居中
<style>
    div{
        border: solid 1px lightgray;
        margin: 10px;
    }
    span{
        border: solid 1px lightskyblue;
    }
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>

<div style="width:300px;margin:0 auto">
    设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>

<span style="width:300px;margin:0 auto">
  span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>

<div style="text-align:center">
    <span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>


左侧固定，右边自动占满
<style>
    .left{
        width:200px;
        float:left;
        background-color:pink
    }
    .right{
        overflow:hidden;
        background-color:lightskyblue;
    }
</style>

<div class="left">左边固定宽度</div>
<div class="right">右边自动填满</div>


line-height方式
<style>
    #d {
        line-height: 100px;
    }
    div{
        border:solid 1px lightskyblue;
    }
</style>

<div id="d">line-height 适合单独一行垂直居中</div>

内边距方式
借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
<style>
    #d2 {
        padding: 30 0;
    }
    div{
        border:solid 1px lightskyblue;
    }
</style>

<div id="d2">多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容
</div>




table方式
首先通过display: table-cell;把div用单元格的形式显示，
然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。

<style>
    #d3 {
        display: table-cell;
        vertical-align: middle;
        height:200px;
    }

    div{
        border:solid 1px lightskyblue;
    }
</style>

<div id="d3">
    <img src="https://how2j.cn/example.gif">
</div>




左右固定，中间自适应的布局
<style>
    .left{
        width:200px;
        float:left;
        background-color:pink
    }
    .right{
        width:200px;
        float:right;
        background-color:pink
    }
    .center {margin:0 200px;   background-color:lightblue}
</style>

<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
<div class="center">中间自适应</div>


一个div始终贴在下方
首先把蓝色div设置为相对定位
然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面
<style>
    #div1
    {
        position: relative;
        height: 300px;
        width: 90%;
        background-color: skyblue;
    }
    #div2
    {
        position: absolute;
        bottom: 0;
        height: 30px;
        width: 100%;
        background-color: lightgreen;
    }
</style>

<div id="div1">
    <div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
    </div>
</div>




块之间有空格
如果多个span连续编写，像这样：

<span>连续的span</span><span>连续的span</span>


是不会有空格的
但是真正开发代码的时候，一般不会连续书写span,而是不同的span之间有回车换行，比如这样：

<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>


而这样编写代码，就会导致<span>之间出现空格
<style>
span{
    border-bottom:2px solid lightgray;
}
</style>

<div class="continue">
<span>连续的span</span><span>连续的span</span><span>连续的span</span><span>连续的span</span>
</div>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>



解决办法
使用float来解决。
float使用完毕之后，记得在下面加上 <div style="clear:both"></div>
    用于使得后续的元素，不会和这些span重复在一起
<style>
div.nocontinue span{
    border-bottom:2px solid lightgray;
    float:left;
}
</style>

<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>

<div style="clear:both"></div>

<div>后续的内容</div>


</body>
</html>